<template>
	<view>
		<view class="xcContainer">
			<!--bg-image-->
			<view class="bg_box">
				<image :src="'../../static/img/'+imgName+'.png'" class="wper100" mode="widthFix"></image>
			</view>
			<!--container-->
			<view :class="'page_container '+imgName">
				 <xc-box :title="title"  @click="$emit('click')">
					 <template v-slot:content>
						 <slot name="content">
							 
						 </slot>
					 </template>
					 <template v-slot:btns>
						 <slot name="btns">
						 		<xc-button :name="btnName" @click="$emit('click')"></xc-button>					 
						 </slot>
					 </template>
				 </xc-box>
			</view>
			<slot name="footer">
										 
			</slot>
			
		</view>
	</view>
</template>

<script>
	import xcBox from "@/components/simple/xcBox.vue"
	import xcButton from "@/components/simple/xcButton.vue"
	export default {
		name:"container",
		components:{
			xcBox,
			xcButton
		},
		props:{
			imgName:{
				type:String,
				default:'small_banner'
			},
			title:{
				type:String,
				default:''
			},
			btnName:{
				type:String,
				default:''
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.xcContainer {
		.bg_box {
			position: relative;
		}
		.page_container {
			position: relative;
			top:-140upx;
			padding:0 24upx;
		}
		.page_container.small_banner{
				top:-140upx;
		}
		.page_container.big_banner{
				top:-210upx;
		}
	}
	
</style>
